import React, { useState, useEffect } from 'react';
import { Heatmap } from '@ant-design/charts';
const DemoHeatmap= () => {
  const [data, setData] = useState([]);
  useEffect(() => {
    asyncFetch();
  }, []);
  const asyncFetch = () => {
    fetch('../src/assets/data.json')
      .then((response) => response.json())
      .then((json) => setData(json))
      .catch((error) => {
        console.log('fetch data failed', error);
      });
  };
  const config = {
    forceFit: false,
    width: 650,
    height: 500,
    data,
    xField: 'time',
    yField: 'week',
    colorField: 'work',
    shapeType:  'rect',
    color:['#174c83', '#7eb6d4', '#efefeb', '#efa759', '#9b4d16'],
    meta: { 'time': { type: 'cat' } },
  };
  return <Heatmap {...config} />;
};
export default DemoHeatmap;


